<!DOCTYPE html>



  


<html class="theme-next pisces use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">










<meta name="description" content="github地址 搭建用vue-cli新建好项目 cssrem新建一个rem-config.js文件 12345678910export default function() &amp;#123;	//首先取得当得屏幕宽度	var width = window.screen.width;	var scaleSize = 100,		designSize = 1920;		//用当得宽度除以（设计尺寸除以缩">
<meta property="og:type" content="article">
<meta property="og:title" content="新建vue项目之后要搭建的项目框架">
<meta property="og:url" content="http://yoursite.com/2020/05/08/新建vue项目之后要搭建的项目框架/index.html">
<meta property="og:site_name" content="春风自是人间客">
<meta property="og:description" content="github地址 搭建用vue-cli新建好项目 cssrem新建一个rem-config.js文件 12345678910export default function() &amp;#123;	//首先取得当得屏幕宽度	var width = window.screen.width;	var scaleSize = 100,		designSize = 1920;		//用当得宽度除以（设计尺寸除以缩">
<meta property="og:locale" content="zh-Hans">
<meta property="og:updated_time" content="2020-09-10T23:26:09.837Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="新建vue项目之后要搭建的项目框架">
<meta name="twitter:description" content="github地址 搭建用vue-cli新建好项目 cssrem新建一个rem-config.js文件 12345678910export default function() &amp;#123;	//首先取得当得屏幕宽度	var width = window.screen.width;	var scaleSize = 100,		designSize = 1920;		//用当得宽度除以（设计尺寸除以缩">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: "",
      labels: ""
    }
  };
</script>



  <link rel="canonical" href="http://yoursite.com/2020/05/08/新建vue项目之后要搭建的项目框架/">





  <title>新建vue项目之后要搭建的项目框架 | 春风自是人间客</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">春风自是人间客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">是非成败转头空，青山依旧在，几度夕阳红。</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives" rel="section">
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories" rel="section">
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-program">
          <a href="/categories/program" rel="section">
            
            程序
          </a>
        </li>
      
        
        <li class="menu-item menu-item-reading">
          <a href="/categories/reading" rel="section">
            
            阅读
          </a>
        </li>
      
        
        <li class="menu-item menu-item-idea">
          <a href="/categories/idea" rel="section">
            
            想法
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags" rel="section">
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about" rel="section">
            
            关于我
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://yoursite.com/2020/05/08/新建vue项目之后要搭建的项目框架/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="彭丹丹">
      <meta itemprop="description" content>
      <meta itemprop="image" content="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="春风自是人间客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">新建vue项目之后要搭建的项目框架</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-05-08T09:57:31+08:00">
                2020-05-08
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/program/" itemprop="url" rel="index">
                    <span itemprop="name">program</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  2,238
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  12
                </span>
              
            </div>
          

          
          
        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p><a href="https://github.com/firefly1984982452/base" target="_blank" rel="noopener">github地址</a></p>
<h1 id="搭建"><a href="#搭建" class="headerlink" title="搭建"></a>搭建</h1><p>用<code>vue-cli</code>新建好项目</p>
<h1 id="css"><a href="#css" class="headerlink" title="css"></a>css</h1><h2 id="rem"><a href="#rem" class="headerlink" title="rem"></a>rem</h2><p>新建一个<code>rem-config.js</code>文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">export default function() &#123;</span><br><span class="line">	//首先取得当得屏幕宽度</span><br><span class="line">	var width = window.screen.width;</span><br><span class="line">	var scaleSize = 100,</span><br><span class="line">		designSize = 1920;</span><br><span class="line">		//用当得宽度除以（设计尺寸除以缩放尺寸）</span><br><span class="line">	var size = width / (designSize / scaleSize);</span><br><span class="line">	//设置font-size</span><br><span class="line">	document.getElementsByTagName(&apos;html&apos;)[0].style.fontSize = (size) + &apos;px&apos;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在<code>main.js</code>里面引入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import remConfig from &apos;./config/rem-config&apos;; // 配置rem</span><br><span class="line">remConfig(); // 执行rem</span><br></pre></td></tr></table></figure>
<h2 id="初始化css"><a href="#初始化css" class="headerlink" title="初始化css"></a>初始化css</h2><p>新建<code>reset.css</code></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">@charset &quot;utf-8&quot;;</span><br><span class="line">/*公共样式*/</span><br><span class="line">html,body&#123;padding:0; margin:0;cursor: default;height: 100%;&#125;</span><br><span class="line">/*如果用了rem，body里可设置默认font-size:.16rem*/</span><br><span class="line">body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td &#123; margin: 0; padding: 0 ;&#125;</span><br><span class="line">body&#123;font-family:&quot;PingFangSC&quot;,&quot;Microsoft YaHei&quot;,&quot;微软雅黑&quot;,&quot;Hiragino Sans GB&quot;,&quot;arial&quot;,&quot;Tahoma&quot;,&quot;SimSun&quot;,&quot;宋体&quot;,&quot;sans-serif&quot;;&#125;</span><br><span class="line">h1, h2, h3, h4, h5, h6 &#123; font-size: 100% ;&#125;</span><br><span class="line">address, cite, dfn, em, var &#123; font-style: normal ;&#125;</span><br><span class="line">ul, ol, dl &#123; list-style: none &#125;</span><br><span class="line">i&#123;list-style: none;&#125;</span><br><span class="line">a &#123; text-decoration: none !important; outline: none ;font-family:&quot;Microsoft YaHei&quot;,&quot;微软雅黑&quot;,&quot;Hiragino Sans GB&quot;,&quot;arial&quot;,&quot;Tahoma&quot;,&quot;SimSun&quot;,&quot;宋体&quot;,&quot;sans-serif&quot;;cursor: pointer; color:#767676;&#125;</span><br><span class="line">img &#123; border:0;&#125;</span><br><span class="line">button, input, select, textarea &#123; font-size: 100% ;font-family:&quot;Microsoft YaHei&quot;,&quot;微软雅黑&quot;,&quot;Hiragino Sans GB&quot;,&quot;arial&quot;,&quot;Tahoma&quot;,&quot;SimSun&quot;,&quot;宋体&quot;,&quot;sans-serif&quot;; outline: none;&#125;</span><br><span class="line">table &#123; border-collapse: collapse; border-spacing: 0 ;&#125;</span><br><span class="line">.clear&#123; clear:both;&#125;</span><br><span class="line">.clearfix:after&#123;display:block;clear:both;content:&quot;\0020&quot;;visibility:hidden;height:0;&#125;</span><br><span class="line">.clearfix&#123;*zoom:1;&#125;</span><br><span class="line">.fl&#123;float: left;&#125;</span><br><span class="line">.fr&#123;float: right;&#125;</span><br><span class="line">input::-webkit-outer-spin-button,input::-webkit-inner-spin-button&#123;-webkit-appearance: none !important&#125;</span><br><span class="line">input[type=&quot;number&quot;]&#123;-moz-appearance:textfield;&#125;</span><br></pre></td></tr></table></figure>
<p>在<code>app.vue</code>里面引入</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;style&gt;</span><br><span class="line">@import url(&apos;./assets/css/base.css&apos;);</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h2 id="字体文件"><a href="#字体文件" class="headerlink" title="字体文件"></a>字体文件</h2><p>一般设计稿上会用其它字体。</p>
<p>1.首先新建font文件夹，把所有的ttf字体放入，注意一定要是小写后缀名，大写后缀可能会导致报错。</p>
<p>2.然后新建一个<code>font.css</code>文件记录所有字体</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">@font-face &#123;</span><br><span class="line">    font-family: FZZYJW;</span><br><span class="line">    src: url(&quot;../assets/font/FZZYJW.ttf&quot;);</span><br><span class="line">&#125;</span><br><span class="line">@font-face &#123;</span><br><span class="line">    font-family: DIGITAL-Dream;</span><br><span class="line">    src: url(&quot;../assets/font/DIGITAL-Dream.ttf&quot;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>3.在<code>main.js</code>里面引用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">import &apos;./config/font-family-config.css&apos;; // 配置字体</span><br></pre></td></tr></table></figure>
<p>4.应用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">font-family: &apos;PINGFANG-REGULAR&apos;;</span><br></pre></td></tr></table></figure>
<h1 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h1><p>公用组件全局配置</p>
<p>在<code>main.js</code>里面定义</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import Box from &apos;@/components/box&apos;</span><br><span class="line">Vue.component(&apos;Box&apos;, Box);</span><br></pre></td></tr></table></figure>
<p>在<code>home.vue</code>里面使用</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;Box /&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h1 id="路由"><a href="#路由" class="headerlink" title="路由"></a>路由</h1><h2 id="定义主页及路由跳转文件"><a href="#定义主页及路由跳转文件" class="headerlink" title="定义主页及路由跳转文件"></a>定义主页及路由跳转文件</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">home.vue</span><br><span class="line">page.vue</span><br><span class="line">page1.vue</span><br><span class="line">page2.vue</span><br></pre></td></tr></table></figure>
<h2 id="在route-js里面定义"><a href="#在route-js里面定义" class="headerlink" title="在route.js里面定义"></a>在route.js里面定义</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &apos;vue&apos;</span><br><span class="line">import Router from &apos;vue-router&apos;</span><br><span class="line">import Home from &apos;@/pages/home&apos;</span><br><span class="line">import Page from &apos;@/pages/page&apos;</span><br><span class="line">import Page1 from &apos;@/pages/page1&apos;</span><br><span class="line">import Page2 from &apos;@/pages/page2&apos;</span><br><span class="line"></span><br><span class="line">Vue.use(Router)</span><br><span class="line"></span><br><span class="line">export default new Router(&#123;</span><br><span class="line">  routes: [</span><br><span class="line">    &#123;</span><br><span class="line">      path: &apos;/&apos;,</span><br><span class="line">      name: &apos;Home&apos;,</span><br><span class="line">      component: Home,</span><br><span class="line">      children: [&#123;</span><br><span class="line">        path:&quot;&quot;,</span><br><span class="line">        redirect: &apos;page&apos;</span><br><span class="line">      &#125;,&#123;</span><br><span class="line">        path:&apos;page&apos;,</span><br><span class="line">        name:&apos;xx1&apos;,</span><br><span class="line">        component: Page</span><br><span class="line">      &#125;,&#123;</span><br><span class="line">        path:&apos;page1&apos;,</span><br><span class="line">        name:&apos;xx1&apos;,</span><br><span class="line">        component: Page1</span><br><span class="line">      &#125;,&#123;</span><br><span class="line">        path:&apos;page2&apos;,</span><br><span class="line">        name:&apos;xx2&apos;,</span><br><span class="line">        component: Page2</span><br><span class="line">      &#125;]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="在home里面跳转"><a href="#在home里面跳转" class="headerlink" title="在home里面跳转"></a>在home里面跳转</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line">  &lt;div class=&quot;page&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;header&quot;&gt;</span><br><span class="line">          &lt;div class=&quot;logo&quot; @click=&quot;changePage(&apos;0&apos;)&quot;&gt;&lt;/div&gt;</span><br><span class="line">          &lt;p class=&quot;title&quot;&gt;title&lt;/p&gt;</span><br><span class="line">          &lt;div class=&quot;right-contral&quot;&gt;</span><br><span class="line">            &lt;div class=&quot;button&quot; @click=&quot;changePage(&apos;1&apos;)&quot;&gt;button1&lt;/div&gt;</span><br><span class="line">            &lt;div class=&quot;button&quot; @click=&quot;changePage(&apos;2&apos;)&quot;&gt;button2&lt;/div&gt;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">      &lt;/div&gt;</span><br><span class="line">    &lt;router-view class=&quot;content&quot;&gt;&lt;/router-view&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">...</span><br><span class="line"></span><br><span class="line">  changePage (data) &#123;</span><br><span class="line">      console.log(data)</span><br><span class="line">      let url = &apos;&apos;</span><br><span class="line">      switch (data) &#123;</span><br><span class="line">          case &apos;0&apos;:</span><br><span class="line">              url = &apos;page&apos;</span><br><span class="line">              break;</span><br><span class="line">      </span><br><span class="line">          case &apos;1&apos;:</span><br><span class="line">              url = &apos;page1&apos;</span><br><span class="line">              break;</span><br><span class="line">      </span><br><span class="line">          case &apos;2&apos;:</span><br><span class="line">              url = &apos;page2&apos;</span><br><span class="line">              </span><br><span class="line">              break;</span><br><span class="line">      </span><br><span class="line">          default:</span><br><span class="line">              break;</span><br><span class="line">      &#125;</span><br><span class="line">      this.$router.push(&#123;</span><br><span class="line">          path: url</span><br><span class="line">      &#125;)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h1 id="vuex"><a href="#vuex" class="headerlink" title="vuex"></a>vuex</h1><p><a href="https://firefly1984982452.github.io/2018/03/19/vue%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/#%E4%BD%BF%E7%94%A8Vuex" target="_blank" rel="noopener">链接</a></p>
<h1 id="eventBus"><a href="#eventBus" class="headerlink" title="eventBus"></a>eventBus</h1><p><a href="https://firefly1984982452.github.io/2018/03/19/vue%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95%E6%80%BB%E7%BB%93/#vue%E5%85%84%E5%BC%9F%E7%BB%84%E4%BB%B6%E9%80%9A%E8%BF%87eventbus%E4%BC%A0%E5%80%BC" target="_blank" rel="noopener">链接</a></p>
<h1 id="配置echarts"><a href="#配置echarts" class="headerlink" title="配置echarts"></a>配置echarts</h1><h2 id="下载"><a href="#下载" class="headerlink" title="下载"></a>下载</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install echarts --save</span><br></pre></td></tr></table></figure>
<h2 id="写echarts组件"><a href="#写echarts组件" class="headerlink" title="写echarts组件"></a>写echarts组件</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div :style=&quot;&#123;width: width, height:height&#125;&quot;&gt;</span><br><span class="line">      &lt;div class=&quot;echarts&quot; :id=&quot;domID&quot; :style=&quot;&#123;width: width,height:height,cursor: &apos;col-resize&apos;&#125;&quot;&gt;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">import echarts from &apos;echarts&apos;</span><br><span class="line">import &#123; guid &#125; from &apos;../assets/js/common&apos;</span><br><span class="line">export default &#123;</span><br><span class="line">  data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      hasError: false,</span><br><span class="line">      err: &apos;&apos;,</span><br><span class="line">      domID: &apos;d_&apos; + guid(),</span><br><span class="line">      option: null,</span><br><span class="line">      chart: null</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  props: &#123;</span><br><span class="line">    width: &#123;</span><br><span class="line">      default: &apos;100%&apos;,</span><br><span class="line">      type: String</span><br><span class="line">    &#125;,</span><br><span class="line">    height: &#123;</span><br><span class="line">      default: &apos;100%&apos;,</span><br><span class="line">      type: String</span><br><span class="line">    &#125;,</span><br><span class="line">    config: &#123;</span><br><span class="line">      default: &apos;&apos;,</span><br><span class="line">      type: String</span><br><span class="line">    &#125;,</span><br><span class="line">    hand: &#123;</span><br><span class="line">      default: &apos;false&apos;,</span><br><span class="line">      type: String</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  created () &#123;</span><br><span class="line">    this.option = require(&apos;../config/echartsConfig/&apos; + this.config).option</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted: function () &#123;</span><br><span class="line">    window.addEventListener(</span><br><span class="line">        &quot;resize&quot;,this.resizeB,false</span><br><span class="line">    )</span><br><span class="line">    try &#123;</span><br><span class="line">      if (this.option == null) &#123;</span><br><span class="line">        this.err = &apos;找不到配置信息&apos;</span><br><span class="line">        this.hasError = true</span><br><span class="line">      &#125; else &#123;</span><br><span class="line">        this.chart = echarts.init(document.getElementById(this.domID))</span><br><span class="line">        document.getElementById(this.domID).style.height = &apos;100%&apos;</span><br><span class="line">        this.chart.setOption(this.option)</span><br><span class="line">        this.chart.on(&apos;click&apos;, (params) =&gt; &#123;</span><br><span class="line">          this.$bus.emit(&apos;dataFromE&apos;, params)</span><br><span class="line">          if (this.option.selfTitle === &apos;事件统计&apos;) &#123;</span><br><span class="line">            if (params.componentType === &apos;xAxis&apos;) &#123;</span><br><span class="line">              this.option.xAxis.axisLabel.textStyle.color = (value, index) =&gt; &#123;</span><br><span class="line">                return value === params.value ? &apos;#40F6B9&apos; : &apos;#89ADBF&apos;</span><br><span class="line">              &#125;</span><br><span class="line">              this.option.series[0].itemStyle.normal = &#123;</span><br><span class="line">                barBorderRadius: [5, 5, 0, 0],</span><br><span class="line">                color: (value, index) =&gt; &#123;</span><br><span class="line">                  return value.name === params.value ? new echarts.graphic.LinearGradient(</span><br><span class="line">                    0, 0, 0, 1,</span><br><span class="line">                    [</span><br><span class="line">                      &#123;offset: 0, color: &apos;rgba(66,255,190,1)&apos;&#125;,</span><br><span class="line">                      &#123;offset: 1, color: &apos;rgba(66,255,190,0.13)&apos;&#125;</span><br><span class="line">                    ]</span><br><span class="line">                  ) : new echarts.graphic.LinearGradient(</span><br><span class="line">                    0, 0, 0, 1,</span><br><span class="line">                    [</span><br><span class="line">                      &#123;offset: 0, color: &apos;rgba(0,226,255,1)&apos;&#125;,</span><br><span class="line">                      &#123;offset: 1, color: &apos;rgba(0,193,255,0.13)&apos;&#125;</span><br><span class="line">                    ]</span><br><span class="line">                  )</span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125; else &#123;</span><br><span class="line">              this.option.xAxis.axisLabel.textStyle.color = (value, index) =&gt; &#123;</span><br><span class="line">                return value === params.name ? &apos;#40F6B9&apos; : &apos;#89ADBF&apos;</span><br><span class="line">              &#125;</span><br><span class="line">              this.option.series[0].itemStyle.normal = &#123;</span><br><span class="line">                barBorderRadius: [5, 5, 0, 0],</span><br><span class="line">                color: (value, index) =&gt; &#123;</span><br><span class="line">                  return value.name === params.name ? new echarts.graphic.LinearGradient(</span><br><span class="line">                    0, 0, 0, 1,</span><br><span class="line">                    [</span><br><span class="line">                      &#123;offset: 0, color: &apos;rgba(66,255,190,1)&apos;&#125;,</span><br><span class="line">                      &#123;offset: 1, color: &apos;rgba(66,255,190,0.13)&apos;&#125;</span><br><span class="line">                    ]</span><br><span class="line">                  ) : new echarts.graphic.LinearGradient(</span><br><span class="line">                    0, 0, 0, 1,</span><br><span class="line">                    [</span><br><span class="line">                      &#123;offset: 0, color: &apos;rgba(0,226,255,1)&apos;&#125;,</span><br><span class="line">                      &#123;offset: 1, color: &apos;rgba(0,193,255,0.13)&apos;&#125;</span><br><span class="line">                    ]</span><br><span class="line">                  )</span><br><span class="line">                &#125;</span><br><span class="line">              &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            this.chart.setOption(this.option)</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125; catch (e) &#123;</span><br><span class="line">      this.err = e.message</span><br><span class="line">      this.hasError = true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  activated () &#123;</span><br><span class="line">    let timer = setTimeout(() =&gt; &#123;</span><br><span class="line">      this.raiseSroll()</span><br><span class="line">      clearTimeout(timer)</span><br><span class="line">    &#125;, 400)</span><br><span class="line">    window.onresize =() =&gt; &#123;</span><br><span class="line">        this.resizeB</span><br><span class="line">    &#125;</span><br><span class="line">    window.addEventListener(</span><br><span class="line">        &quot;resize&quot;,this.resizeB,false</span><br><span class="line">    )</span><br><span class="line">  &#125;,</span><br><span class="line">  deactivated () &#123;</span><br><span class="line">    window.removeEventListener(&quot;resize&quot;,this.resizeB);</span><br><span class="line">    this.raiseSroll(false)</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    refresh: function () &#123;</span><br><span class="line">      this.chart.setOption(this.option)</span><br><span class="line">    &#125;,</span><br><span class="line">    dispatchAction (e) &#123;</span><br><span class="line">      setTimeout(() =&gt; &#123;</span><br><span class="line">        this.chart.dispatchAction(&#123;</span><br><span class="line">          type: &apos;highlight&apos;,</span><br><span class="line">          seriesIndex: 0,</span><br><span class="line">          dataIndex: 0</span><br><span class="line">        &#125;)</span><br><span class="line">        this.chart.on(&apos;mouseout&apos;, (params) =&gt; &#123;</span><br><span class="line">          this.chart.dispatchAction(&#123;</span><br><span class="line">            type: &apos;highlight&apos;,</span><br><span class="line">            seriesIndex: 0,</span><br><span class="line">            dataIndex: 0</span><br><span class="line">          &#125;)</span><br><span class="line">        &#125;)</span><br><span class="line">        this.chart.on(&apos;mouseover&apos;, (params) =&gt; &#123;</span><br><span class="line">          if (params.name === e[0].name) &#123;</span><br><span class="line">            this.chart.dispatchAction(&#123;</span><br><span class="line">              type: &apos;highlight&apos;,</span><br><span class="line">              seriesIndex: 0,</span><br><span class="line">              dataIndex: 0</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125; else &#123;</span><br><span class="line">            this.chart.dispatchAction(&#123;</span><br><span class="line">              type: &apos;downplay&apos;,</span><br><span class="line">              seriesIndex: 0,</span><br><span class="line">              dataIndex: 0</span><br><span class="line">            &#125;)</span><br><span class="line">          &#125;</span><br><span class="line">        &#125;)</span><br><span class="line">      &#125;, 400)</span><br><span class="line">      this.chart.setOption(this.option)</span><br><span class="line">    &#125;,</span><br><span class="line">    resizeB: function () &#123;</span><br><span class="line">      let timer1 = setTimeout(() =&gt; &#123;</span><br><span class="line">        this.chart.resize()</span><br><span class="line">        // console.log(&apos;调用了改变echart自适应&apos;)</span><br><span class="line">        this.refresh()</span><br><span class="line">        clearTimeout(timer1)</span><br><span class="line">      &#125;, 400)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line">.echarts &#123;</span><br><span class="line">  height: 100% !important;</span><br><span class="line">&#125;</span><br><span class="line">.echarts div &#123;</span><br><span class="line">  height: 100% !important;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line">&lt;style&gt;</span><br><span class="line">  .handClass&gt;div&gt;canvas&#123;</span><br><span class="line">    cursor: col-resize !important;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h2 id="main-js里面定义"><a href="#main-js里面定义" class="headerlink" title="main.js里面定义"></a>main.js里面定义</h2><p>和常规的注册全局组件一样的写法</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 引入echarts公用组件</span><br><span class="line">import Ehcart from &apos;@/components/echarts&apos;; </span><br><span class="line">Vue.component(&apos;ehcart&apos;, Ehcart);</span><br></pre></td></tr></table></figure>
<h2 id="在vue里面使用"><a href="#在vue里面使用" class="headerlink" title="在vue里面使用"></a>在vue里面使用</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;ehcart</span><br><span class="line">  ref=&quot;echarts_nevel&quot;</span><br><span class="line">  config=&apos;test&apos;</span><br><span class="line">  height=&quot;3.58rem&quot;</span><br><span class="line">  width=&apos;100%&apos;/&gt;</span><br><span class="line"></span><br><span class="line">let echart = this.$refs.echarts_nevel;</span><br><span class="line">let resData = res.data;</span><br><span class="line">echart.option.xAxis.data = resData.map(v =&gt; v.lx);</span><br><span class="line">echart.option.series[0].data = resData.map(v =&gt; v.vx);</span><br><span class="line">echart.resizeB(); // 如果要后期改变大小</span><br><span class="line">echart.refresh();</span><br></pre></td></tr></table></figure>
<h2 id="配置echarts具体内容"><a href="#配置echarts具体内容" class="headerlink" title="配置echarts具体内容"></a>配置echarts具体内容</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">  export const option = &#123;</span><br><span class="line">    tooltip: &#123;</span><br><span class="line">        trigger: &apos;item&apos;,</span><br><span class="line">        formatter: &apos;&#123;a&#125; &lt;br/&gt;&#123;b&#125;: &#123;c&#125; (&#123;d&#125;%)&apos;</span><br><span class="line">    &#125;,</span><br><span class="line">    legend: &#123;</span><br><span class="line">        orient: &apos;vertical&apos;,</span><br><span class="line">        left: 10,</span><br><span class="line">        data: [&apos;直接访问&apos;, &apos;邮件营销&apos;, &apos;联盟广告&apos;, &apos;视频广告&apos;, &apos;搜索引擎&apos;]</span><br><span class="line">    &#125;,</span><br><span class="line">    series: [</span><br><span class="line">        &#123;</span><br><span class="line">            name: &apos;访问来源&apos;,</span><br><span class="line">            type: &apos;pie&apos;,</span><br><span class="line">            radius: [&apos;50%&apos;, &apos;70%&apos;],</span><br><span class="line">            avoidLabelOverlap: false,</span><br><span class="line">            label: &#123;</span><br><span class="line">                show: false,</span><br><span class="line">                position: &apos;center&apos;</span><br><span class="line">            &#125;,</span><br><span class="line">            emphasis: &#123;</span><br><span class="line">                label: &#123;</span><br><span class="line">                    show: true,</span><br><span class="line">                    fontSize: &apos;30&apos;,</span><br><span class="line">                    fontWeight: &apos;bold&apos;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line">            labelLine: &#123;</span><br><span class="line">                show: false</span><br><span class="line">            &#125;,</span><br><span class="line">            data: [</span><br><span class="line">                &#123;value: 335, name: &apos;直接访问&apos;&#125;,</span><br><span class="line">                &#123;value: 310, name: &apos;邮件营销&apos;&#125;,</span><br><span class="line">                &#123;value: 234, name: &apos;联盟广告&apos;&#125;,</span><br><span class="line">                &#123;value: 135, name: &apos;视频广告&apos;&#125;,</span><br><span class="line">                &#123;value: 1548, name: &apos;搜索引擎&apos;&#125;</span><br><span class="line">            ]</span><br><span class="line">        &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="写README-MD"><a href="#写README-MD" class="headerlink" title="写README.MD"></a>写README.MD</h1><h2 id="xx"><a href="#xx" class="headerlink" title="xx"></a>xx</h2><blockquote>
<p>xxUI</p>
</blockquote>
<h3 id="项目结构"><a href="#项目结构" class="headerlink" title="项目结构"></a>项目结构</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line">├── build  #webpack编译相关文件目录，一般不用动</span><br><span class="line">├── config  #配置目录，一般不用动</span><br><span class="line">├── dist  #生产环境下build后的文件存放目录（发布目录）</span><br><span class="line">├── static  #开发模式下的静态资源目录</span><br><span class="line">├── src #源码目录</span><br><span class="line">│   ├─── assets  #资源目录</span><br><span class="line">|   |    ├─── images #小图片存放目录（20K以内），大图片请放到OSS上</span><br><span class="line">|   |    ├─── css #公共样式文件，一般不允许自己修改，所有样式建议使用less格式书写</span><br><span class="line">|   |    ├─── font #公共字体文件</span><br><span class="line">|   |─── bus   #eventBus</span><br><span class="line">│   ├─── components  #公共组件及框架组件</span><br><span class="line">|   |─── config   # rem或字体配置代码</span><br><span class="line">│   ├─── layouts  #页面布局组件，基本布局都已经好了，一般不允许在此添加文件</span><br><span class="line">|   |    ├─── console.vue #登录页等全屏的布局</span><br><span class="line">|   |    ├─── default.vue #无侧边菜单的布局</span><br><span class="line">|   |    ├─── index.vue #有侧边菜单的布局</span><br><span class="line">|   |    ├─── page.vue #有侧边菜单的布局，实际业务页面均使用此布局</span><br><span class="line">│   ├─── router  #总路由目录，一般不允许添加，如若需要请按照index.js内容依样添加内容</span><br><span class="line">│   ├─── settings  #公用配置文件目录，主要保存API服务器地址及根据环境进行API地址切换</span><br><span class="line">|   |    ├─── development.js #开发环境的配置，主要配置集成在youban-utils组件里了</span><br><span class="line">|   |    ├─── production.js #线上或测试环境的配置，请不要修改</span><br><span class="line">|   |    ├─── index.js #配置的入口文件，请不要修改</span><br><span class="line">│   ├─── store #vuex相关目录</span><br><span class="line">│   ├─── App.vue #项目入口组件，请勿修改</span><br><span class="line">│   └─── main.js  #项目的入口文件，请勿修改</span><br><span class="line">├── index.html #首页入口文件，你可以添加一些 meta 信息或同统计代码啥的</span><br><span class="line">├── package.json #项目配置/依赖文件</span><br><span class="line">└── README.md #项目的说明文档，markdown 格式</span><br></pre></td></tr></table></figure>
<h2 id="项目约定"><a href="#项目约定" class="headerlink" title="项目约定"></a>项目约定</h2><h2 id="启动步骤"><a href="#启动步骤" class="headerlink" title="启动步骤"></a>启动步骤</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 安装项目依赖</span></span><br><span class="line">npm install --registry https://i.youbankeji.com/nexus/content/groups/youban-npm/</span><br><span class="line"></span><br><span class="line"><span class="comment"># 本地运行</span></span><br><span class="line">npm run dev</span><br><span class="line"></span><br><span class="line"><span class="comment"># 发布上线</span></span><br><span class="line">npm run build</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/04/20/《蒋勋说红楼梦》复看/" rel="next" title="《蒋勋说红楼梦》复看">
                <i class="fa fa-chevron-left"></i> 《蒋勋说红楼梦》复看
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/05/16/已有减肥知识汇总/" rel="prev" title="已有减肥知识汇总">
                已有减肥知识汇总 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zODk2OC8xNTQ5Ng=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="https://upload.jianshu.io/users/upload_avatars/830956/debe5156eed7?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240" alt="彭丹丹">
            
              <p class="site-author-name" itemprop="name">彭丹丹</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives">
              
                  <span class="site-state-item-count">183</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">3</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#搭建"><span class="nav-number">1.</span> <span class="nav-text">搭建</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#css"><span class="nav-number">2.</span> <span class="nav-text">css</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#rem"><span class="nav-number">2.1.</span> <span class="nav-text">rem</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#初始化css"><span class="nav-number">2.2.</span> <span class="nav-text">初始化css</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字体文件"><span class="nav-number">2.3.</span> <span class="nav-text">字体文件</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#组件"><span class="nav-number">3.</span> <span class="nav-text">组件</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#路由"><span class="nav-number">4.</span> <span class="nav-text">路由</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#定义主页及路由跳转文件"><span class="nav-number">4.1.</span> <span class="nav-text">定义主页及路由跳转文件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在route-js里面定义"><span class="nav-number">4.2.</span> <span class="nav-text">在route.js里面定义</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在home里面跳转"><span class="nav-number">4.3.</span> <span class="nav-text">在home里面跳转</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#vuex"><span class="nav-number">5.</span> <span class="nav-text">vuex</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#eventBus"><span class="nav-number">6.</span> <span class="nav-text">eventBus</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#配置echarts"><span class="nav-number">7.</span> <span class="nav-text">配置echarts</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#下载"><span class="nav-number">7.1.</span> <span class="nav-text">下载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#写echarts组件"><span class="nav-number">7.2.</span> <span class="nav-text">写echarts组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#main-js里面定义"><span class="nav-number">7.3.</span> <span class="nav-text">main.js里面定义</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在vue里面使用"><span class="nav-number">7.4.</span> <span class="nav-text">在vue里面使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#配置echarts具体内容"><span class="nav-number">7.5.</span> <span class="nav-text">配置echarts具体内容</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#写README-MD"><span class="nav-number">8.</span> <span class="nav-text">写README.MD</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#xx"><span class="nav-number">8.1.</span> <span class="nav-text">xx</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#项目结构"><span class="nav-number">8.1.1.</span> <span class="nav-text">项目结构</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#项目约定"><span class="nav-number">8.2.</span> <span class="nav-text">项目约定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#启动步骤"><span class="nav-number">8.3.</span> <span class="nav-text">启动步骤</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">彭丹丹</span>

  
</div>


	<div class="powered-by">
	<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
	  本站访客数:<span id="busuanzi_value_site_uv"></span>
	</span>
	</div>
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Pisces</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  

  

  

  

  undefined
  
  <!-- 页面爆炸效果 -->
  
<script src="/live2dw/lib/L2Dwidget.min.js?0c58a1486de42ac6cc1c59c7d98ae887"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/tororo.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true}});</script></body>
</html>
